<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:组织管理新增弹出框组件
* @fileName:organization-drawer.vue
* @author:zhouyongjie@yzbdl.ac.cn
* @date:2022-4-6
!-->

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { showErrorMessage, showSuccessMessage } from "@/common/message";
import { checkPassword } from "@/services/common/tool";
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;

//接收父组件传值
const props = defineProps({
  submitFunc: Function as any,
});

/**
 * @description: 密码验证空值
 * @param {any} rule
 * @param {any} value
 * @param {any} callback
 * @return void
 */
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (!checkPassword(value)) {
    callback(
      new Error("密码必须包含英文大小写，数字，特殊字符，字符数量为6-20位")
    );
  } else {
    callback();
  }
};
//定义参数
const formSize = ref("default");
const showSelect = ref(false);
const showPass = ref(false);
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  orgName: "",
  nickName: "",
  orgUser: "",
  userName: "",
  password: "",
});
const labelPosition = ref("top");
//验证规则
const rules = reactive({
  orgName: [
    {
      required: true,
      message: "组织名称不能为空",
      trigger: "blur",
    },
    { min: 1, max: 64, message: "组织名称长度为1-64位", trigger: "blur" },
  ],
  userName: [
    { required: true, message: "组织管理员账号不能为空", trigger: "blur" },
    { min: 1, max: 64, message: "组织管理员账号长度为1-64位", trigger: "blur" },
  ],
  orgUser: [{ required: true, message: "", trigger: "blur" }],
  nickName: [
    { required: true, message: "用户昵称不能为空", trigger: "blur" },
    { min: 1, max: 64, message: "用户昵称长度为1-64位", trigger: "blur" },
  ],
  password: [
    {
      required: true,
      message: "还没有填写密码",
      trigger: "blur",
    },
    { min: 6, max: 20, message: "长度为6-20位", trigger: "blur" },
    { validator: validatePass, trigger: "blur" },
  ],
});
const options = reactive({
  list: [] as any,
});

/**
 * @description:提交表单
 * @return void
 */
const submitForm = () => {
  if (options.list.length != 0) {
    if (ruleForm.orgName != "" && ruleForm.orgUser != "") {
      const res = proxy.$HTTP.post({
        url: `/manager/org`,
        data: {
          orgName: ruleForm.orgName,
          userId: ruleForm.orgUser,
        },
      });
      res.then((res: any) => {
        if (res.isOk) {
          showSuccessMessage({
            message: "新增成功",
          });
          props.submitFunc(ruleForm);
        }
      });
      res.catch((error: any) => {
        if (error.data instanceof Array) {
          showErrorMessage({
            message: error.data[0].errorMsg,
          });
        } else {
          showErrorMessage({
            message: error.data,
          });
        }
      });
    } else {
      return;
    }
  } else {
    if (
      ruleForm.password != "" &&
      checkPassword(ruleForm.password) &&
      ruleForm.nickName != "" &&
      ruleForm.userName != "" &&
      ruleForm.orgName != ""
    ) {
      const res = proxy.$HTTP.post({
        url: `/manager/emptyOrg`,
        data: {
          nickName: ruleForm.nickName,
          password: ruleForm.password,
          userName: ruleForm.userName,
          orgName: ruleForm.orgName,
        },
      });
      res.then((res: any) => {
        if (res.isOk) {
          showSuccessMessage({
            message: "新增成功",
          });
          props.submitFunc(ruleForm);
        }
      });
      res.catch((error: any) => {
        if (error.data instanceof Array) {
          showErrorMessage({
            message: error.data[0].errorMsg,
          });
        } else {
          showErrorMessage({
            message: error.data,
          });
        }
      });
    } else {
      return;
    }
  }
};

/**
 * @description:匹配管理员
 * @return void
 */
const seachUser = () => {
  options.list = [];
  const res = proxy.$HTTP.get({
    url: `/manager/org/user`,
    params: {
      userName: ruleForm.userName,
    },
  });
  res.then((res: any) => {
    if (res.isOk) {
      if (res.data.length > 0) {
        options.list = res.data;
        showSelect.value = true;
        showPass.value = false;
      } else {
        showSelect.value = false;
        showPass.value = true;
      }
    }
  });
  res.catch((error: any) => {
    if (error.data instanceof Array) {
      showErrorMessage({
        message: error.data[0].errorMsg,
      });
    } else {
      showErrorMessage({
        message: error.data,
      });
    }
  });
};
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    :label-position="labelPosition"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
  >
    <el-form-item label="组织名称" prop="orgName">
      <el-input
        v-model="ruleForm.orgName"
        size="large"
        placeholder="请输入组织名称"
      />
    </el-form-item>
    <el-form-item label="组织管理员账号" prop="userName">
      <el-input
        v-model="ruleForm.userName"
        size="large"
        @blur="seachUser"
        placeholder="请输入组织管理员账号"
      />
    </el-form-item>

    <el-form-item label="组织管理员" prop="orgUser" v-show="showSelect">
      <el-select
        v-model="ruleForm.orgUser"
        size="large"
        style="width: 700px"
        clearable
        placeholder="请选择对应的管理员"
      >
        <el-option
          v-for="item in options.list"
          :key="item.id"
          :label="item.username"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="用户昵称" prop="nickName" v-show="showPass">
      <el-input
        v-model="ruleForm.nickName"
        size="large"
        placeholder="请输入组织管理员账号"
      />
    </el-form-item>
    <el-form-item label="账号密码" prop="password" v-show="showPass">
      <el-input
        v-model="ruleForm.password"
        size="large"
        show-password
        type="password"
        placeholder="请输入账号密码"
      />
    </el-form-item>
    <el-form-item class="ClickButton">
      <el-button @click="submitForm()">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  font-family: PingFang SC;
  font-weight: 700;
  color: #000000;
  font-size: 14px;
}
:deep(.el-input) {
  height: 40px;
  background-color: #ffffff;
}
:deep(.el-textarea) {
  height: 100px;
  background-color: #ffffff;
  .el-textarea__inner {
    height: 100px;
  }
}
.ClickButton {
  :deep(.el-form-item__content) {
    display: flex;
    justify-content: flex-end;
    .el-button {
      width: 68px;
      height: 40px;
      background-color: #ffffff;
      border: 1px solid;
      border-color: #cccccc;
    }
  }
}
</style>
